import React from 'react';
// import { useDrag } from 'react-dnd'
import { DragSource } from 'react-dnd';

const list = [{
    componentType: 'block',
    name: '容器组件',
    data: {
      text: '容器组件'
    },
    rect: {
        width: 100,
        height: 100,
    },
    props: {
      className: "divContainer"
    },
    title: "容器组件",
    componentName: "div"
},
{
  componentType: 'block',
  name: '按钮组件',
  rect: {
      width: 100,
      height: 100,
  },
  title: "开关组件'",
  
  componentName: "Switch",
}
]

const externalNodeType = 'Component';
const externalNodeSpec = {
  // This needs to return an object with a property `node` in it.
  // Object rest spread is recommended to avoid side effects of
  // referencing the same object in different trees.
  beginDrag: componentProps => ({ node: { ...componentProps.node } }),
};
const externalNodeCollect = (connect /* , monitor */) => ({
  connectDragSource: connect.dragSource(),
  // Add props via react-dnd APIs to enable more visual
  // customization of your component
  // isDragging: monitor.isDragging(),
  // didDrop: monitor.didDrop(),
});

const ComponentItem = (props) => {
  const { connectDragSource, node } = props;
  return connectDragSource(<div style={{padding: 10}}>
    <div style={{height: 20, width: 100, border: '1px solid #ccc'}} draggable={true}>{node.name}({node.title})</div>
  </div>, { dropEffect: 'copy' })
}

const ComponentDragSource = DragSource(
  externalNodeType,
  externalNodeSpec,
  externalNodeCollect
)(ComponentItem)

export default function ComponentList () {

    return <div>{list.map((item, index) => {
      return (
        <ComponentDragSource key={index} node={item}/>
      )
    }
    )}</div>
}